<template>
  <div>
    <!-- 审核 - 选择业务范围 -->
    <el-select
      v-model="value"
      @change="handleChange"
      placeholder="请选择"
      style="width: 100%"
      clearable
      :disabled="disabled"
    >
      <el-option
        v-for="item in newOptions"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: [],
      options: [
        { id: "1", name: "课程元素库" },
        { id: "2", name: "专业元素库" },
        { id: "3", name: "兵种元素库" },
        { id: "4", name: "专题库" },
        { id: "5", name: "示范微视频" },
        { id: "6", name: "培训资源" },
        { id: "11", name: "用户管理" },
        { id: "21", name: "思政元素" },
      ],
      newOptions: [],
    };
  },
  props: {
    defaultValue: String | Number,
    disabled: {
      type: Boolean,
      default: false,
    },
    scoped: {
      type: Array,
      default() {
        return [0, 100];
      },
    },
  },
  watch: {
    defaultValue(v) {
      this.value = v;
    },
  },
  mounted() {
    this.newOptions = this.options.slice(this.scoped[0], this.scoped[1]);
    this.value = this.defaultValue.toString();
  },
  methods: {
    handleChange(value) {
      this.$emit("emit", value);
    },
  },
};
</script>